@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss";

.kotlinUsageHighlights {
    margin-top: var(--ktl-box-page-l);
}

.container {
    display: grid;
    gap: var(--ktl-box-block-m);
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: var(--ktl-box-section-s);
}

.title {
    margin: 0;
}

.card {
    height: 336px;
}

.cardContent {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.logoWrapper {
    height: 76px;
}

.logo {
    display: block;
}

.text {
    display: block;
}

.tag {
    margin-top: auto;
}

@media (--ktl-ds) {
    .card {
        height: 384px;
    }
}

@media (--ktl-tl) {

    .card {
        height: 336px;
    }

    .container {
        grid-template-columns: 1fr 1fr;
    }
}


@media (--ktl-tm) {

    .card {
        height: 336px;
    }

}

@media (--ktl-ts) {

    .card {
        height: 264px;
    }

    .kotlinUsageHighlights {
        margin-top: var(--ktl-box-page-m);
    }

    .container {
        grid-template-columns: 1fr;
    }
}

@media (--ktl-mm) {
    .card {
        height: 312px;
    }
}

.buttonWrapper {
  margin-top: var(--ktl-box-section-m);
}
